<template>
  <div class="home">
    <div class="item" :style="(companyDataStore.currentComanyInfo?.role_id || '0') == '2' ? 'width: 49%' : ''">
      <div class="wrap">
        <div class="title">数据统计</div>
        <div class="totals">
          <dl>
            <dt>累计员工数量</dt>
            <dd>{{ statistics.total }}<span>人</span></dd>
          </dl>
          <dl>
            <dt>累计文本工单</dt>
            <dd>{{ statistics.order }}<span>份</span></dd>
          </dl>
          <dl>
            <dt>累计咨询次数</dt>
            <dd>{{ statistics.log }}<span>次</span></dd>
          </dl>
          <dl>
            <dt>企业合规值</dt>
            <dd>{{ statistics.risk }}<span>分</span></dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="item" :style="(companyDataStore.currentComanyInfo?.role_id || '0') == '2' ? 'width: 49%' : ''">
      <div class="wrap">
        <div class="title" style="margin-bottom: 0;">近七日使用情况</div>
        <SevenDayChart :day="sevenDayCategory" :data="sevenDayData" v-if="isLoad" />
      </div>
    </div>
    <div class="item" v-if="(companyDataStore.currentComanyInfo?.role_id || '0') !== '2'">
      <div class="wrap">
        <div class="title">企业员工统计</div>
        <EmployeeChart :data="employeeData" v-if="isLoad" />
      </div>
    </div>
    <div class="item itemx itemh">
      <div class="wrap">
        <div class="title">待办提醒事项</div>
        <ToDo />
      </div>
    </div>
    <div class="items itemh">
      <div class="chat-count">
        <div class="wrap">
          <div class="title">我的法务部</div>
          <LegalDept :data="legalCount" />
        </div>
      </div>
      <div class="work-order">
        <div class="wrap">
          <div class="title">我的文本工单进度<span @click="diaLogVisible = true">全部工单</span></div>
          <WorkOrder :data="orderCount" />
        </div>
      </div>
    </div>
    <el-dialog v-model="diaLogVisible" title="工单列表" width="1200px">
      <el-table :data="list" class="table" header-row-class-name="table-header" style="width: 100%;" border>
        <el-table-column prop="title" label="工单名称" align="center" width="120" />
        <el-table-column prop="cate_name" label="工单类型" width="120" align="center" />
        <el-table-column prop="creator_name" label="创建人" width="120" align="center" />
        <el-table-column label="群聊名称" width="120" align="center">
          <template #default="{ row }">
            <strong style="color: #006EFF;">{{ row.group_name }}</strong>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="90" align="center">
          <template #default="{ row }">
            <el-tag type="primary" v-if="row.status == 1">初审中</el-tag>
            <el-tag type="success" v-if="row.status == 2">已完结</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="text_legal_name" label="处理人" width="120" align="center" />
        <el-table-column prop="create_time" label="工单提交时间" width="180" align="center" />
        <el-table-column prop="plan_time" label="预计完成时间" width="180" align="center" />
        <el-table-column prop="remark" label="特殊要求及备注" align="center" show-overflow-tooltip width="190" />
        <el-table-column label="操作" width="190" align="center" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" @click="openDetail(row)" :loading="row.loading"
              :disabled="isLoading">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination v-model:current-page="params.page" layout="total, prev, pager, next" :total="total"
          :page-size="10" @current-change="handleCurrentChange" />
      </div>
      <el-dialog v-model="diaLogDetailVisible" title="工单详情" width="800px">
        <div class="detail">
          <div class="header">
            <div class="plan-time">预计完成时间：{{ detailData.plan_time }}</div>
            <div class="steps">
              <div class="item done">
                <el-icon color="#fff" size="20">
                  <CircleCheck />
                </el-icon>
                <div class="label">创建工单</div>
              </div>
              <div class="item done">
                <el-icon color="#fff" size="20">
                  <CircleCheck />
                </el-icon>
                <div class="label">初审中</div>
              </div>
              <div :class="detailData.status == 2 ? 'item done' : 'item'">
                <el-icon color="#fff" size="20" v-if="detailData.status == 2">
                  <CircleCheck />
                </el-icon>
                <div class="circle" v-else></div>
                <div class="label">终审中</div>
              </div>
              <div :class="detailData.status == 2 ? 'item done' : 'item'">
                <el-icon color="#fff" size="20" v-if="detailData.status == 2">
                  <CircleCheck />
                </el-icon>
                <div class="circle" v-else></div>
                <div class="label">已完成</div>
              </div>
              <div class="line1 done"></div>
              <div class="line2" :class="{ done: detailData.status == 2 }"></div>
              <div class="line3" :class="{ done: detailData.status == 2 }"></div>
            </div>
          </div>
          <div class="box">
            <div class="title">
              <div class="icon">
                <el-icon color="#015aa9" size="16">
                  <Document />
                </el-icon>
              </div>
              <span>工单信息</span>
            </div>
            <div class="info">
              <div class="row"><text>工单类型：</text>{{ detailData.cate_name }}</div>
              <div class="row"><text>工单名称：</text>{{ detailData.title }}</div>
              <div class="row"><text>创建时间：</text>{{ detailData.submit_time }}</div>
              <div class="row" v-if="detailData.status == 2"><text>完结时间：</text>{{ detailData.handle_time }}</div>
            </div>
          </div>
          <div class="box" v-if="detailData.status == 2">
            <div class="title">
              <div class="icon">
                <el-icon color="#015aa9" size="16">
                  <EditPen />
                </el-icon>
              </div>
              <span>处理内容</span>
            </div>
            <div class="file">
              <div class="row" v-for="(item, index) in detailData.handle_file_json" :key="index">
                <span>{{ item.original_name }}</span>
                <el-button type="primary" size="small" @click="handleDownload(item)">下载</el-button>
              </div>
              <div class="row" v-for="(item, index) in detailData.supplement" :key="index">
                <text>{{ item.original_name }}</text>
                <el-button type="primary" size="small" @click="handleDownload(item)">下载</el-button>
              </div>
            </div>
            <div class="content">
              <div class="title">
                <el-icon color="#316bff" size="16">
                  <Flag />
                </el-icon>
                <text>处理意见</text>
                <span style="color: #FF3B30;">(请务必仔细阅读)</span>
              </div>
              <div v-html="detailData.handle_opinion"></div>
            </div>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { GetHomeWorkOrder, GetHomeWorkOrderDetail } from '@/api'
import { GetHomeData, GetHomeLegal } from '@/api/index'
import { useCompanyDataStore } from '@/store/companys'
import { onMounted, ref, watch } from 'vue'
import EmployeeChart from './Home/EmployeeChart.vue'
import LegalDept from './Home/LegalDept.vue'
import SevenDayChart from './Home/SevenDayChart.vue'
import ToDo from './Home/ToDo.vue'
import WorkOrder from './Home/WorkOrder.vue'

const companyDataStore = useCompanyDataStore()

interface ChartData {
  name: string;
  data: number[];
}
interface EmployeeStats {
  name: string;
  value: number;
  color: string;
}

const statistics = ref({
  total: 0,
  order: 0,
  log: 0,
  risk: 0
})
const sevenDayCategory = ref<string[]>([])
const sevenDayData = ref<ChartData[]>([])
const employeeData = ref<EmployeeStats[]>([
  { name: '正式员工', value: 0, color: '#1763f0' },
  { name: '试用期员工', value: 0, color: '#2ad4ad' },
  { name: '离职员工', value: 0, color: '#9188e4' },
  { name: '待离职员工', value: 0, color: '#fe7b42' }
])
const isLoad = ref(false)
const legalCount = ref(0)
const orderCount = ref(0)
const diaLogVisible = ref(false)
const params = ref<any>({
  group_id: '',
  keywords: '',
  status: -1,
  pid: 0,
  cate_id: '',
  start_time: '',
  end_time: '',
  page: 1
});
const list = ref([]);
const total = ref(0);
const cateList = ref([{
  id: 0,
  name: '全部'
}]);
const statusList = ref([{
  id: -1,
  name: '全部'
}, {
  id: 1,
  name: '初审中'
}, {
  id: 2,
  name: '已完结'
}]);
const diaLogDetailVisible = ref(false)
const isLoading = ref(false)
const detailData = ref<any>(null)

onMounted(() => {
  if (companyDataStore.currentComanyInfo) {
    getData()
  }
})

watch(
  () => companyDataStore.currentComanyInfo,
  (newCompany) => {
    if (newCompany) {
      getData()
    }
  },
  { deep: true }
)

watch(
  () => diaLogVisible.value,
  (newData) => {
    if (newData) {
      getList()
    }
  }
)

const getData = () => {
  GetHomeData().then(res => {
    statistics.value = res.data.statistics
    sevenDayCategory.value = res.data.seven_date
    sevenDayData.value = res.data.seven_data
    if (res.data.user_data) {
      employeeData.value[0].value = res.data.user_data.zs.count
      employeeData.value[1].value = res.data.user_data.sy.count
      employeeData.value[2].value = res.data.user_data.lz.count
      employeeData.value[3].value = res.data.user_data.dlz.count
    }
    isLoad.value = true
  })
  GetHomeLegal().then(res => {
    legalCount.value = res.data.legal_count
    orderCount.value = res.data.order_count
  })
}

function handleCurrentChange(val: number) {
  params.value.page = val
  getList()
}

function getList() {
  GetHomeWorkOrder(params.value).then(res => {
    let lists = res.data.data
    lists.forEach((item: any) => {
      item.loading = false
    })
    list.value = lists
    console.log(list.value)
    total.value = res.data.total
  })
}

const openDetail = (row: any) => {
  row.loading = true
  GetHomeWorkOrderDetail({
    id: row.id
  }).then(res => {
    row.loading = false
    diaLogDetailVisible.value = true
    detailData.value = res.data
  })
}
const handleDownload = (item: any) => {
  window.open(item.url)
}

</script>

<style lang="scss" scoped>
.home {
  display: flex;
  height: calc(100vh - 140px);
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 32%;
    background-color: #fff;
    border-radius: 15px;
    height: 280px;

    .totals {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      dl {
        width: 49%;
        height: 100px;
        border-radius: 10px;
        background-color: #f5f9fc;
        margin-bottom: 7px;

        dt {
          font-size: 16px;
          padding: 20px 0 0 20px;
        }

        dd {
          font-size: 22px;
          font-weight: bold;
          color: #015aa9;
          padding: 10px 0 0 20px;

          span{
            font-size: 14px;
            font-weight: normal;
            color: #666;
            margin-left: 5px;
          }
        }
      }
    }
  }

  .itemx {
    width: 66%;
    margin-top: 20px;
  }

  .itemh {
    height: calc(100vh - 440px);
    min-height: 400px;
  }

  .items {
    width: 32%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .chat-count {
      background-image: linear-gradient(#f5fafe, #fff);
      width: 100%;
      height: 48%;
      border-radius: 20px;
    }

    .work-order {
      background-color: #fff;
      width: 100%;
      border-radius: 20px;
      height: 48%;
    }
  }

  .wrap {
    padding: 15px;
    height: calc(100% - 30px);

    .title {
      font-size: 20px;
      margin-bottom: 20px;
      height: 24px;
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      color: #333;

      span {
        font-size: 14px;
        color: #666;
        cursor: pointer;
      }
    }
  }
}

.detail {

  .header {
    background-image: linear-gradient(#e6f1ff, #f3f9ff);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;

    .plan-time {
      color: #015aa9;
      font-size: 14px;
    }

    .steps {
      margin-top: 20px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 400px;

      .line1 {
        width: 130px;
        height: 3px;
        background-color: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        z-index: 1;

        &.done {
          background-color: #015aa9;
        }
      }

      .line2 {
        width: 130px;
        height: 3px;
        background-color: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1;

        &.done {
          background-color: #015aa9;
        }
      }

      .line3 {
        width: 130px;
        height: 3px;
        background-color: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        z-index: 1;

        &.done {
          background-color: #015aa9;
        }
      }

      .item {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: relative;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: center;

        &.done {
          background-color: #015aa9;

          .label {
            color: #333;
          }
        }

        .label {
          position: absolute;
          width: 120px;
          font-size: 14px;
          color: #999;
          top: 30px;
          margin: auto;
          text-align: center;
        }

        .circle {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: #fff;
        }
      }
    }
  }

  .box {
    padding: 0 10px 10px;
    background-color: #fff;

    .title {
      height: 50px;
      border-bottom: solid 1px #eee;
      display: flex;
      align-items: center;

      .icon {
        width: 30px;
        height: 30px;
        background-color: rgb(241, 245, 255);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      span {
        font-size: 14px;
        margin-left: 10px;
        font-weight: 500;
      }
    }

    .info {
      padding: 10px 0 0;
      display: flex;
      flex-wrap: wrap;

      .row {
        width: 50%;
        font-size: 14px;
        line-height: 28px;

        span {
          color: #585D69;
        }
      }
    }

    .file {
      background-color: #f7f7f7;
      border-radius: 10px;
      margin-top: 10px;
      padding: 0 10px;

      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #585D69;
        height: 40px;

        span {
          width: 70%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &+.row {
          border-top: solid 1px #eee;
        }
      }
    }

    .content {
      background: #F1F5FF;
      padding: 10px;
      margin-top: 10px;

      .title {
        border: none;
        height: 30px;
        margin-bottom: 10px;
      }

      div {
        font-size: 14px;
        color: #585D69;
      }
    }
  }
}

.table{
        width: 100%;
        // max-height: calc(100vh - 584px);
        min-height: 100px;
    }

    :deep(.el-table__header) {
        .table-header {
            th {
                font-size: 16px;
                background: #f3f8fb;
                height: 55px;
                color: #6f7070;
                font-weight: normal;
            }
        }
    }
</style>
